<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(v,k) in banner" :key="k">
        <img :src="v.url" :alt=v.title>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import * as info from '../api/info'

export default {
  name: 'swiper',
  props: {
    banner: {}
  },
  mounted () {
    // this.lunbo()
    // this.getBanner()
  },
  methods: {
    lunbo: function () {
      let mySwiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: true
      })
    },
    getBanner () {
      let that = this
      info.getBanners(1, 5).then(res => {
        that.banner = res.data
        this.lunbo()
      })
    }
  },
}
</script>

<style scoped>
  .swiper-slide img {
    display: block;
  }
</style>
